﻿@{
    ViewBag.Title = "Index";
}
<div class="layui-form-item">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" id="UserName" placeholder="用户名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <a class="layui-btn" id="btnSearch">搜索</a>
    </div>
</div>
<table id="table" class="layui-table" lay-filter="table"></table>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        @Html.LayuiButton("add", "新增用户", "layui-btn layui-btn-sm", "/System/SysUser/Add")
        @Html.LayuiButton("edit", "编辑用户", "layui-btn layui-btn-sm", "/System/SysUser/Edit")
        @Html.LayuiButton("del", "删除用户", "layui-btn layui-btn-sm", "/System/SysUser/Delete")
    </div>
</script>
<script>
    layui.use(['table', 'layer'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        //查询
        function getWhere() {
            var where = { UserName: $("#UserName").val() };
            return where;
        }
        layui.tableReload = function () {
            table.reload("table", {
                where: getWhere(),
                page: { curr: 1 }
            });
        }
        $("#btnSearch").click(function () {
            layui.tableReload();
        })
        // 渲染表格
        table.render({
            id: "table",
            elem: '#table',
            method: "post",
            url: 'List',
            cellMinWidth: 80,
            toolbar: "#toolbar",
            cols: [
                [
                    { type: 'checkbox' },
                    { field: 'UserName', title: '用户名称' },
                    { field: 'DeptName', title: '单位名称' },
                    { field: 'RoleName', title: '角色名称' },
                    { field: 'CreateDate', title: '添加时间' }
                ]
            ],
            done: function (res, curr, count) { //res 即为原始返回的数据
                console.log(res);
            },
            loading: true,
            event: true,
            page: { limit: 20 }
        });
        //监听头部事件
        table.on('toolbar(table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            if (obj.event != 'add') {
                if (data.length === 0) {
                    layer.msg('请选择一行');
                    return;
                } else if (data.length > 1) {
                    layer.msg('只能同时操作一个');
                    return;
                }
            }
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        title: '新增用户',
                        maxmin: true,
                        area: ['400px', '350px'],
                        content: 'Add',
                        end: function () {
                            layui.tableReload();
                        }
                    });
                    break;
                case 'edit':
                    layer.open({
                        type: 2,
                        title: '编辑用户',
                        maxmin: true,
                        area: ['400px', '350px'],
                        content: 'Edit?id=' + data[0].ID,
                        end: function () {
                            layui.tableReload();
                        }
                    });
                    break;
            };
        });
    });
</script>
